<template>
  <div class="log-wrapper">
    <div class="log-body">
      <!-- 筛选条件 -->
      <section class="log-top">
        <div class='filter-box'>
          <div class='search-date-picker'>
            <el-date-picker
              v-model="timeValue"
              type="datetimerange"
              align="left"
              unlink-panels
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class='date-picker-input'>
            </el-date-picker>
          </div>
          <div class='search-input-box ml16'>
            <el-input
              type="text"
              placeholder='请输入姓名搜索'
              v-model='searchValue' >
            </el-input>
          </div>
          <div class="search-select-box ml16">
            <el-select
              clearable
              filterable
              v-model="searchTenantId"
              placeholder="请选择租户">
              <el-option v-for='item in tenantList'
                :key='item.tenantId'
                :label='item.tenantName'
                :value='item.tenantId'>
              </el-option>
            </el-select>
          </div>
          <div class="search-btn ml10" @click='handleLogSearch'>
            查询
          </div>
        </div>
      </section>
      <div class="table-wrapper">
        <el-table
          :data="logList"
          tooltip-effect='light'
          style="width: 100%">
          <el-table-column label="序号"
                           type="index"
                           width="120">
          </el-table-column>
          <el-table-column show-overflow-tooltip
                           prop="username"
                           min-width='80'
                           label="昵称">
          </el-table-column>
          <el-table-column show-overflow-tooltip
                           prop="startTime"
                           min-width='110'
                           label="操作时间">
            <template slot-scope="scope">
              {{scope.row.startTime}}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip
                           prop="account"
                           min-width='110'
                           label="操作账号">
          </el-table-column>
          <el-table-column show-overflow-tooltip
                           prop="tenantName"
                           min-width='110'
                           label="操作租户">
          </el-table-column>
          <el-table-column show-overflow-tooltip
                           prop="modul"
                           min-width='110'
                           label="操作模块">
          </el-table-column>
          <el-table-column show-overflow-tooltip
                           prop="type"
                           min-width='110'
                           label="操作类型">
          </el-table-column>
          <el-table-column show-overflow-tooltip
                           prop="ip"
                           min-width='110'
                           label="ip">
          </el-table-column>
          <el-table-column show-overflow-tooltip
                           prop="description"
                           min-width='110'
                           label="内容">
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;"
          background
          :total="total"
          :current-page="page"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="sizes, prev, pager, next">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tenantList: [],
      timeValue: [],
      searchValue: '',
      searchTenantId: null,
      page: 1,
      pageSize: 10,
      total: 0,
      logList: []
    }
  },
  methods: {
    getLogList () {
      let startT = this.timeValue ? this.timeValue[0] : null
      let endT = this.timeValue ? this.timeValue[1] : null
      let startTime = startT ? this.formatDate(new Date(startT), 'yyyy-MM-dd hh:mm:ss') : null
      let endTime = endT ? this.formatDate(new Date(endT), 'yyyy-MM-dd hh:mm:ss') : null
      this.loading = true
      let param = {
        startTime: startTime,
        endTime: endTime,
        name: this.searchValue || null,
        tenantId: this.searchTenantId || null,
        currentPage: this.page,
        pageSize: this.pageSize
      }
      let url = `/log/list`
      this.get(url, param).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          let data = res.data.data
          this.total = +data.total
          if (data && data.list && data.list.length) {
            this.logList = data.list
            this.logList.forEach(item => {
              item.startTime = this.formatDate(new Date(Number(item.startTime)), 'yyyy-MM-dd hh:mm:ss')
            })
          } else {
            this.logList = []
          }
          this.tableHeight = this.logList && this.logList.length ? (this.logList.length + 1) * 50 + 3 + 'px' : '200px'
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    handleLogSearch () {
      this.page = 1
      this.getLogList()
    },
    handleSizeChange (val) {
      this.page = 1
      this.pageSize = val
      this.getLogList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getLogList()
    },
    // 日期格式转换
    formatDate (date, fmt) {
      if (typeof date === 'string') {
        return date
      }
      if (!fmt) fmt = 'yyyy-MM-dd hh:mm:ss'
      if (!date || date == null) return null
      var o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
      return fmt
    },
    // 获取租户列表
    fetchTenantList () {
      let url = `${this.SERVICE_TENANT}/search`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.tenantList = data
          } else {
            this.tenantList = []
          }
        }
      }).catch(err => {
        this.handleError(err)
      })
    }
  },
  created () {
    this.getLogList()
    this.fetchTenantList()
  }
}
</script>
<style lang="stylus" scoped>
.log-wrapper
  width 100%
  height 100%
  .log-body
    width 100%
    min-height 100%
    font-size 12px
    overflow-y auto
    background #f2f2f6
    padded_box(border-box, 6px)
    border-radius 6px
    .log-top
      between()
      width 100%
      background #fff
      padded_box(border-box, 15px 20px)
      border-radius 6px
      margin-bottom 6px
      .filter-box
        display flex
        align-items center
        .search-date-picker
          width 300px
          .date-picker-input
            >>> .el-range-input::-webkit-input-placeholder
              color #757575
        .search-input-box, .search-select-box
          width 200px
          height 30px
          >>> input
            line-height 30px
          >>> .el-input__inner
            height 30px
        .search-btn
          color #3496FF
          cursor pointer
          font-size 12px
    .table-wrapper
      background: #fff;
      box-sizing: border-box;
      padded_box(border-box, 15px 20px);
      border-radius: 6px
      .table-btn
        display inline-block
        color #3496FF
        font-size 12px
        cursor pointer
        &.delete
          color #FA376C
        &.stop
          color #FF7E40
      .table-btn + .table-btn
        margin-left 20px
</style>
